<template>
    <div class="dashboard-container">
      <el-card class="welcome-card">
        <template #header>
          <div class="card-header">
            <span>欢迎使用后台管理系统</span>
          </div>
        </template>
        <div class="dashboard-content">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card shadow="hover" class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>部门数量</span>
                  </div>
                </template>
                <div class="stat-value">
                  <el-statistic :value="12">
                    <template #suffix>
                      <span class="suffix-label">个</span>
                    </template>
                  </el-statistic>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>员工数量</span>
                  </div>
                </template>
                <div class="stat-value">
                  <el-statistic :value="128">
                    <template #suffix>
                      <span class="suffix-label">人</span>
                    </template>
                  </el-statistic>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>系统用户</span>
                  </div>
                </template>
                <div class="stat-value">
                  <el-statistic :value="5">
                    <template #suffix>
                      <span class="suffix-label">人</span>
                    </template>
                  </el-statistic>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  // Dashboard组件逻辑
  </script>
  
  <style scoped lang="less">
  .dashboard-container {
    padding: 20px;
  }
  
  .welcome-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .dashboard-content {
    margin-top: 20px;
  }
  
  .stat-card {
    height: 180px;
    display: flex;
    flex-direction: column;
  }
  
  .stat-value {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 24px;
  }
  
  .suffix-label {
    font-size: 14px;
    margin-left: 5px;
  }
  </style>